<template>
  <el-card class="box-card">

    <!--  条件查询  -->
    <div class="select-div">

      <my-select v-model="condition.status"
                 placeholder="请选择状态"
                 :showList="condition.statusList"
                 labelName='label'
                 valueName='value'/>

      <my-select v-model="condition.type"
                 placeholder="请选择类型"
                 :showList="condition.typeList"
                 labelName='label'
                 valueName='value'/>

      <my-select v-model="condition.categoryId"
                 placeholder="请选择分类"
                 :showList="condition.categoryList"
                 labelName='categoryName'
                 valueName='id'/>

      <my-select v-model="condition.tagId"
                 placeholder="请选择标签"
                 :showList="condition.tagList"
                 labelName='tagName'
                 valueName='id'/>

      <el-input v-model="condition.keywords"
                clearable
                prefix-icon="el-icon-search"
                size="small"
                placeholder="请输入文章标题关键字"
                style="width:200px"
                @keyup.enter.native="searchArticles"/>

      <el-button type="primary" size="small" icon="el-icon-search" style="margin-left:1rem" @click="searchArticles">
        搜索
      </el-button>

      <!-- :disabled="this.sels.length === 0" 如果没有数据让删除按钮失效 -->
      <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteCheck()"
                 :disabled="this.selection.length === 0">删除选中
      </el-button>

      <el-button type="success" size="small" icon="el-icon-delete" @click="resumeCheck()"
                 :disabled="this.selection.length === 0">恢复选中
      </el-button>
    </div>

    <!--  表格内容  -->
    <el-table
        ref="multipleTable"
        :data="tableData"
        border
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" fixed="left"></el-table-column>

      <el-table-column prop="title" label="文章标题" fixed></el-table-column>

      <el-table-column prop="pageView" label="浏览量" sortable></el-table-column>

      <el-table-column prop="likesCount" label="点赞量" sortable></el-table-column>

      <el-table-column prop="categoryName" label="分类"></el-table-column>

      <el-table-column prop="tagVOList" label="标签" width="200">
        <template slot-scope="scope">
          <el-tag v-for="item of scope.row.tagVOList"
                  :key="item.tagId"
                  style="margin-right:0.2rem;margin-top:0.2rem">
            {{ item.tagName }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="type" label="类型">
        <template slot-scope="scope">
          <el-tag :type="articleType(scope.row.type).tagType">
            {{ articleType(scope.row.type).name }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag :type="articleStatus(scope.row.status).tagType">
            {{ articleStatus(scope.row.status).name }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="发表时间" sortable width="100"></el-table-column>

      <el-table-column label="操作" fixed="right" width="100">
        <template slot-scope="scope">
          <el-tooltip effect="dark" content="编辑" placement="top-start">
            <el-button circle icon="el-icon-refresh" size="mini" type="success" @click="resumeCheck(scope.row.id)"/>
          </el-tooltip>

          <el-tooltip effect="dark" content="删除" placement="top-start">
            <el-button circle icon="el-icon-delete" size="mini" type="danger"
                       @click="deleteCheck(scope.row.id)"/>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <!--  分页  -->
    <pagination
        :total="total"
        :page_index="pageNum"
        @pageChange="pageChange"
    />

  </el-card>
</template>

<script>
import { articleApi, categoryApi, tagApi } from '@/api';

export default {
  name: "ArticleRecycleBin",
  /**
   * 存储vue实例或组件中的数据
   */
  data() {
    return {
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      selection: [],
      selectedNum: 0,
      isDelete: 1,
      condition: {
        status: null,
        type: null,
        categoryId: null,
        tagId: null,
        keywords: null,
        categoryList: [],
        tagList: [],
      },
    }
  },

  /**
   * 存放所有需要实现的方法
   */
  methods: {
    /*
    搜索框事件
     */
    searchArticles() {
      this.pageNum = 1;
      this.loadArticleList();
    },

    /*
    分页回调
     */
    pageChange(val) {
      this.pageNum = val.pageNum;
      this.pageSize = val.pageSize;
      this.loadArticleList()
    },

    /*
    复选框事件
     */
    handleSelectionChange(selection) {
      this.selection = selection.map(item => item.id)
      this.selectedNum = selection.length
    },

    /*
    删除选中数据
     */
    deleteCheck(id) {
      this.$confirm("删除后不可恢复", "提示", {
        type: "warning"
      }).then(() => {
        const ids = id == null ? this.selection : [id];
        articleApi.deleteArticles(ids).then((response) => {
          if (response.data.code === 20000) {
            this.$message({
              message: '文章已删除！',
              type: 'success'
            });
            this.loadArticleList();
          }
        });
      }).catch(() => {
        // 取消删除操作
      });
    },

    /*
    恢复选中数据
     */
    resumeCheck(id) {
      this.$confirm("确认恢复选中记录吗？", "提示", {
        type: "warning"
      }).then(() => {
        const param = {
          idList: id == null ? this.selection : [id],
          isDelete: this.isDelete === 0 ? 1 : 0
        };
        
        articleApi.recycleArticles(param).then((response) => {
          if (response.data.code === 20000) {
            this.$message({
              message: '文章已恢复！',
              type: 'success'
            });
            this.loadArticleList();
          }
        }).catch(() => {
          this.$message.error('请重新登录后再试');
        });
      }).catch(() => {
        // 取消恢复操作
      });
    },

    /*
    请求后端接口获取文章列表
     */
    loadArticleList() {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        status: this.condition.status,
        type: this.condition.type,
        categoryId: this.condition.categoryId,
        tagId: this.condition.tagId,
        keywords: this.condition.keywords,
        isDelete: this.isDelete
      };
      
      articleApi.getArticleList(params).then((response) => {
        if (response.data.code === 20000) {
          this.tableData = response.data.data.pagingList;
          this.total = response.data.data.count;
        }
      });
    },

    /*
    查询文章类别列表
     */
    selectCategoryList() {
      categoryApi.getCategoryList().then((response) => {
        if (response.data.code === 20000) {
          this.condition.categoryList = response.data.data.pagingList;
        }
      });
    },

    /*
    查询文章标签列表
     */
    selectTagList() {
      tagApi.getTagList().then((response) => {
        if (response.data.code === 20000) {
          this.condition.tagList = response.data.data.pagingList;
        }
      });
    }
  },

  /**
   * 计算函数，在其相关依赖发生改变时会重新计算值
   */
  computed: {
    // 类型标签
    articleType() {
      return function (type) {
        var tagType = "";
        var name = "";
        switch (type) {
          case 1:
            tagType = "success";
            name = "原创";
            break;
          case 2:
            tagType = "danger";
            name = "转载";
            break;
          default:
            tagType = "primary";
            name = "未知";
            break;
        }
        return {
          tagType: tagType,
          name: name
        }
      }
    },
    // 状态标签
    articleStatus() {
      return function (status) {
        if (status === 0) {
          return {
            tagType: "success",
            name: "公开"
          }
        } else if (status === 1) {
          return {
            tagType: "danger",
            name: "私密"
          }
        } else {
          return {
            tagType: "primary",
            name: "未知"
          }
        }
      }
    },
  },

  /**
   * 这是第二个命周期函数 在created 中, data和methods,都已经被初始好了,
   * 所以 如果要调用 methods 中的方法, 或者操作data中的数据, 最早只能在created 中操作
   */
  created() {

  },

  /**
   * 这是第四个生命周期函数,表示内存中的模板,已经真实的挂载到了页面中, 用户已经可以看到渲染好的页面了
   */
  mounted() {
    this.loadArticleList();
    this.selectCategoryList();
    this.selectTagList();
  }
}
</script>

<style scoped>

</style>
